import * as DT from 'dt-sdk/library/DT'
import { viewer } from '@/components/dt-scene/index.vue'
let grifLinde, gridLabel //经纬网格和经纬标签
let boundaryDataSource = null
export default {
  name: 'AssistBox',
  data() {
    return {
      type: '',
      color: 'rgba(18, 148, 241,1)',
      latlonLine_flag: false,
      plotArr: [
        {
          type: '国境线',
          text: '国境线',
          isSelect: false,
          img: 'static/plot/country.png'
        },
        {
          type: '昼夜线',
          text: '昼夜线',
          isSelect: false,
          img: 'static/plot/night.png'
        },
        {
          type: '经纬网',
          text: '经纬网',
          isSelect: false,
          img: 'static/plot/latlon.png'
        },
        {
          type: '视图切换3D',
          text: '3D',
          isSelect: false,
          img: 'static/plot/3D.png'
        },
        {
          type: '视图切换2D',
          text: '2D',
          isSelect: false,
          img: 'static/plot/2D.png'
        },
        {
          type: '全屏',
          text: '全屏',
          isSelect: false,
          img: 'static/plot/fullscreen.png'
        },
        {
          type: 'Home',
          text: 'Home',
          isSelect: false,
          img: 'static/plot/home.png'
        },
        // {
        //   type: 'water',
        //   text: '水纹',
        //   isSelect: false,
        //   img: 'static/plot/country.png'
        // },
      ]
    }
  },
  mounted() {
    this.addFullScreenListen()
  },
  beforeDestroy() {
    window.onresize = null
  },
  methods: {
    selectPlot(type) {
      console.log('选择了', type)
      // this.$emit('selectPlot', {
      //   type,
      //   color: this.color,
      //   flag: this.checkbox
      // })
      switch (type) {
        case '国境线':
          this.plotArr[0].isSelect = !this.plotArr[0].isSelect
          this.toggleBoundaryLine(this.plotArr[0].isSelect)
          // promise.then()
          break
        case '昼夜线':
          this.plotArr[1].isSelect = !this.plotArr[1].isSelect
          this.toggleDayNight(this.plotArr[1].isSelect)
          break
        case '经纬网':
          this.plotArr[2].isSelect = !this.plotArr[2].isSelect
          this.toggleLatlonLine(this.plotArr[2].isSelect)
          break
        case '视图切换3D':
          // this.plotArr[3].isSelect = !this.plotArr[3].isSelect
          // this.toggleView(this.plotArr[3].isSelect)
          this.toggleView(3)
          break
        case '视图切换2D':
          // this.plotArr[4].isSelect = !this.plotArr[4].isSelect
          this.toggleView(2)
          break
        case '全屏':
          this.plotArr[5].isSelect = !this.plotArr[5].isSelect
          this.toggleFullScreen(this.plotArr[5].isSelect)
          break
        case 'Home':
          // this.plotArr[4].isSelect = !this.plotArr[4].isSelect
          this.goHomeView()
          break
        case 'water':
          this.plotArr[6].isSelect = !this.plotArr[6].isSelect
          break
      }
    },
    toggleWaterVisible() {

    },
    goHomeView() {
      viewer.cesiumViewer.scene.camera.flyHome()
    },
    /**
     * 全屏切换
     * @author wzw
     * @date 2021-10-27
     * @param {any} status
     * @returns {any}
     */
    toggleFullScreen(status) {
      if (status && document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen()
      } else if (!status && document.exitFullscreen) {
        document.exitFullscreen()
      }
    },
    addFullScreenListen() {
      window.onresize = e => {
        if (!document.fullscreen && document.exitFullscreen) {
          this.plotArr[4].isSelect = false
          // document.exitFullscreen()
        }
      }
    },
    /**
     * 切换二三维
     * @author wzw
     * @date 2021-10-27
     * @param {any} status
     * @returns {any}
     */
    toggleView(mode) {
      if (viewer.sceneMode !== mode) {
        viewer.sceneMode = mode
      }
    },
    /**
     * 边境线的添加与移除
     * @author wzw
     * @date 2021-10-27
     * @param {any} status
     * @returns {any}
     */
    toggleBoundaryLine(status) {
      let that = this
      if (status) {
        let promise = DT.Cesium.GeoJsonDataSource.load('./data/countries.json')
        promise.then(function (dataSource) {
          boundaryDataSource = dataSource
          viewer.dataSourceDisplay._dataSourceCollection.add(dataSource)
          let entities = dataSource.entities.values
          for (let i = 0; i < entities.length; i++) {
            let entity = entities[i]
            entity.polygon.outline = true
            entity.polygon.outlineColor = DT.Cesium.Color.YELLOW
          }
        })
      } else {
        if (boundaryDataSource) {
          viewer.dataSourceDisplay._dataSourceCollection.remove(
            boundaryDataSource
          )
        }
        boundaryDataSource = null
      }
    },
    toggleDayNight(status) {
      viewer.cesiumViewer.scene.globe.enableLighting = status
      viewer.cesiumViewer.scene.shadowMap.enabled = status
    },
    /**
     * 经纬网格
     * @author wzw
     * @date 2021-10-26
     * @returns {any}
     */
    toggleLatlonLine(status) {
      if (status) {
        //创建经纬网格
        grifLinde = this.createGridLine(20)
        //创建经纬网格标签
        gridLabel = this.createGridLabel(20)
      } else {
        viewer.cesiumViewer.scene.primitives.remove(grifLinde)
        viewer.cesiumViewer.scene.primitives.remove(gridLabel)
      }
    },
    /**
     * 创建经纬网格
     * @author wzw
     * @date 2021-10-26
     * @param {any} width
     * @returns {any}
     */
    createGridLine(width) {
      let polylines = new DT.Cesium.PolylineCollection()
      let Color = new DT.Cesium.Color(1, 1, 1, 0.2)
      let labelScale = 0.8
      //画纬度
      for (let lat = -90; lat <= 90; lat += width) {
        let line = []
        for (let lon = -180; lon <= 180; lon += width) {
          line.push(new DT.Cesium.Cartesian3.fromDegrees(lon, lat, 100000))
        }
        let p = polylines.add({
          positions: line,
          width: labelScale
        })
        p.material = DT.Cesium.Material.fromType('Color')
        p.material.uniforms.color = Color
      }

      //画经度
      for (let lon = -180; lon <= 180; lon += width) {
        let line = []
        for (let lat = -90; lat <= 90; lat += width) {
          line.push(new DT.Cesium.Cartesian3.fromDegrees(lon, lat, 100000))
        }
        let p = polylines.add({
          positions: line,
          width: labelScale
        })
        p.material = DT.Cesium.Material.fromType('Color')
        p.material.uniforms.color = Color
      }
      polylines.id = 'line'
      viewer.cesiumViewer.scene.primitives.add(polylines)
      return polylines
    },
    /**
     * 创建经纬网格标签
     * @author wzw
     * @date 2021-10-26
     * @param {any} width
     * @returns {any}
     */
    createGridLabel(width) {
      let labels = new DT.Cesium.LabelCollection()
      let Color = new DT.Cesium.Color(1, 1, 1, 0.2)
      for (let lat = -90; lat <= 90; lat += width) {
        for (let lon = -180; lon <= 180; lon += width) {
          let label = labels.add({
            position: new DT.Cesium.Cartesian3.fromDegrees(lon, lat, 100000),
            text: lon + '°/' + lat + '°',
            scale: 0.4,
            fillColor: Color,
            pixelOffset: new DT.Cesium.Cartesian2(10, 10)
          })
        }
      }
      labels.id = 'labels'
      viewer.cesiumViewer.scene.primitives.add(labels)
      return labels
    }
  }
}